{% extends 'blog/base.html' %}

{% block title %}{{ category.name }} - 个人博客{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-tag"></i> {{ category.name }}</h2>
    <a href="{% url 'blog:post_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i> 返回首页
    </a>
</div>

{% if category.description %}
<div class="alert alert-info">
    <i class="fas fa-info-circle"></i> {{ category.description }}
</div>
{% endif %}

{% if posts %}
    {% for post in posts %}
    <div class="card post-card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <h5 class="card-title">
                        <a href="{{ post.get_absolute_url }}" class="text-decoration-none">
                            {{ post.title }}
                        </a>
                    </h5>
                    <p class="card-text text-muted">
                        {{ post.excerpt|truncatewords:30 }}
                    </p>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            <i class="fas fa-user"></i> {{ post.author.username }} |
                            <i class="fas fa-calendar"></i> {{ post.published_at|date:"Y-m-d" }} |
                            <i class="fas fa-eye"></i> {{ post.views }} 次浏览
                        </small>
                        <a href="{{ post.get_absolute_url }}" class="btn btn-outline-primary btn-sm">
                            阅读更多
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    <!-- 分页 -->
    {% if posts.has_other_pages %}
    <nav aria-label="文章分页">
        <ul class="pagination justify-content-center">
            {% if posts.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1">首页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.previous_page_number }}">上一页</a>
            </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">
                    第 {{ posts.number }} 页，共 {{ posts.paginator.num_pages }} 页
                </span>
            </li>

            {% if posts.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.next_page_number }}">下一页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.paginator.num_pages }}">末页</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
{% else %}
    <div class="text-center py-5">
        <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
        <h4>该分类下暂无文章</h4>
        <p class="text-muted">请查看其他分类或返回首页</p>
        <a href="{% url 'blog:post_list' %}" class="btn btn-primary">
            <i class="fas fa-home"></i> 返回首页
        </a>
    </div>
{% endif %}
{% endblock %}
